<template>
  <view class="container w-[750rpx] mx-auto">
    <!-- 顶部用户信息 -->
    <view class="user-header flex flex-col items-center pt-[60rpx] pb-[40rpx] bg-gradient-to-b from-[#2196F3] to-[#21CBF3] rounded-b-[25rpx] shadow-[0_4rpx_15rpx_rgba(33,150,243,0.25)] relative overflow-hidden">
      <view class="user-info flex items-center relative z-2">
        <view class="user-avatar w-[80rpx] h-[80rpx] rounded-full bg-gradient-to-r from-[#64B5F6] to-[#1E88E5] flex items-center justify-center text-[36rpx] border-[3rpx] border-solid border-[rgba(255,255,255,0.3)] mr-[15rpx]">
          <icon-font name="user" class="text-white text-[36rpx]" />
        </view>
        <view class="user-details flex-1">
          <view class="user-name text-[22rpx] font-bold text-white mb-[5rpx] flex items-center">
            张蓝鲸
            <text class="user-tag ml-[8rpx] px-[10rpx] py-[4rpx] rounded-[20rpx] text-[12rpx] font-medium">SVIP会员</text>
          </view>
          <view class="user-id text-[14rpx] opacity-90 mb-[8rpx]">
            ID: BLUEWHALE2023
          </view>
          <view class="user-tags flex gap-[8rpx] flex-wrap">
            <text class="user-tag px-[10rpx] py-[4rpx] rounded-[20rpx] text-[12rpx] font-medium bg-gradient-to-r from-[#FFD54F] to-[#FFB300] text-black">已实名</text>
            <text class="user-tag px-[10rpx] py-[4rpx] rounded-[20rpx] text-[12rpx] font-medium bg-gradient-to-r from-[#81C784] to-[#4CAF50]">平台从业者</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 账户信息卡片 -->
    <view class="account-card bg-white rounded-[16rpx] p-[20rpx] m-[-15rpx_20rpx_20rpx] shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] relative z-10">
      <view class="account-title flex justify-between items-center mb-[15rpx] text-[18rpx] font-bold text-[#2196F3]">
        <text>我的账户</text>
        <icon-font name="wallet" class="text-[#2196F3] text-[32rpx]" />
      </view>

      <view class="account-balance flex justify-between mb-[15rpx] pb-[15rpx] border-b border-[#eee]">
        <view class="balance-item text-center">
          <text class="balance-label text-[14rpx] text-[#666] mb-[5rpx]">可用余额</text>
          <text class="balance-value text-[20rpx] font-bold text-[#2196F3]">¥2,800.00</text>
        </view>
        <view class="balance-item text-center">
          <text class="balance-label text-[14rpx] text-[#666] mb-[5rpx]">冻结资金</text>
          <text class="balance-value freeze text-[20rpx] font-bold text-[#FF9800]">¥500.00</text>
        </view>
        <view class="balance-item text-center">
          <text class="balance-label text-[14rpx] text-[#666] mb-[5rpx]">推广收益</text>
          <text class="balance-value promote text-[20rpx] font-bold text-[#4CAF50]">¥350.00</text>
        </view>
      </view>

      <view class="account-actions flex gap-[15rpx]">
        <nut-button class="action-btn flex-1 h-[45rpx] rounded-[10rpx] flex items-center justify-center font-medium text-white bg-gradient-to-r from-[#2196F3] to-[#21CBF3] transition-all duration-300 hover:translate-y-[-2rpx] hover:shadow-[0_4rpx_8rpx_rgba(0,0,0,0.1)]" @click="recharge">
          <icon-font name="plus-circle" class="mr-[8rpx]" /> 充值
        </nut-button>
        <nut-button class="action-btn flex-1 h-[45rpx] rounded-[10rpx] flex items-center justify-center font-medium text-white bg-gradient-to-r from-[#4CAF50] to-[#81C784] transition-all duration-300 hover:translate-y-[-2rpx] hover:shadow-[0_4rpx_8rpx_rgba(0,0,0,0.1)]" @click="withdraw">
          <icon-font name="wallet" class="mr-[8rpx]" /> 提现
        </nut-button>
        <nut-button class="action-btn flex-1 h-[45rpx] rounded-[10rpx] flex items-center justify-center font-medium text-white bg-gradient-to-r from-[#FF9800] to-[#FFB74D] transition-all duration-300 hover:translate-y-[-2rpx] hover:shadow-[0_4rpx_8rpx_rgba(0,0,0,0.1)]" @click="records">
          <icon-font name="list" class="mr-[8rpx]" /> 记录
        </nut-button>
      </view>
    </view>

    <!-- 功能区 -->
    <view class="section-title px-[20rpx] pt-[15rpx] pb-[5rpx] text-[18rpx] font-bold text-[#333] flex items-center">
      <icon-font name="th-large" class="text-[#2196F3] mr-[8rpx]" />
      常用功能
    </view>
    <view class="grid-section px-[15rpx]">
      <view class="grid-container grid grid-cols-4 gap-[15rpx] p-[10rpx_5rpx_20rpx]">
        <view v-for="(item, index) in features" :key="index" class="grid-item bg-white rounded-[12rpx] flex flex-col items-center justify-center p-[15rpx_5rpx] shadow-[0_3rpx_10rpx_rgba(0,0,0,0.03)] transition-all duration-300 hover:translate-y-[-3rpx] hover:shadow-[0_5rpx_15rpx_rgba(33,150,243,0.15)] cursor-pointer">
          <view class="grid-item-icon w-[50rpx] h-[50rpx] bg-[#E3F2FD] text-[#2196F3] rounded-full flex items-center justify-center mb-[10rpx]">
            <icon-font :name="item.icon" class="text-[24rpx]" />
          </view>
          <text class="grid-item-name text-[13rpx] font-medium text-[#555]">{{ item.name }}</text>
          <text v-if="item.badge" class="grid-item-badge absolute top-[5rpx] right-[5rpx] bg-[#FF5252] text-white text-[10rpx] w-[18rpx] h-[18rpx] rounded-full flex items-center justify-center">{{ item.badge }}</text>
        </view>
      </view>
    </view>

    <!-- 任务管理 -->
    <view class="section-title px-[20rpx] pt-[15rpx] pb-[5rpx] text-[18rpx] font-bold text-[#333] flex items-center">
      <icon-font name="clipboard-list" class="text-[#2196F3] mr-[8rpx]" />
      任务管理
    </view>
    <view class="task-section px-[20rpx]">
      <view class="task-tabs flex bg-white rounded-[12rpx] overflow-hidden mb-[15rpx] shadow-[0_3rpx_10rpx_rgba(0,0,0,0.05)]">
        <view v-for="(tab, index) in taskTabs" :key="index" class="task-tab flex-1 text-center py-[15rpx] font-medium transition-all duration-300 relative" :class="{ 'bg-[#2196F3] text-white': tab.active }" @click="selectTaskTab(index)">
          {{ tab.title }}
          <text v-if="tab.count" class="task-count absolute top-[5rpx] right-[10rpx] bg-[#FF9800] text-white text-[10rpx] w-[18rpx] h-[18rpx] rounded-full flex items-center justify-center">{{ tab.count }}</text>
        </view>
      </view>

      <view class="task-content bg-white rounded-[12rpx] p-[20rpx] shadow-[0_3rpx_10rpx_rgba(0,0,0,0.05)]">
        <view v-for="(category, catIndex) in taskCategories" :key="catIndex" class="task-category mb-[20rpx] last:mb-0">
          <view class="category-title flex justify-between mb-[12rpx] text-[16rpx] font-medium">
            <text>{{ category.title }}</text>
            <text v-if="category.viewAll" class="view-all text-[13rpx] text-[#2196F3]">查看全部</text>
          </view>

          <view class="task-list flex flex-col gap-[12rpx]">
            <view v-for="(task, taskIndex) in category.tasks" :key="taskIndex" class="task-item flex items-center p-[12rpx] bg-[#f9f9f9] rounded-[10rpx] relative overflow-hidden">
              <view class="task-item-line absolute left-0 top-0 h-full w-[4rpx]" :class="{ 'bg-[#2196F3]': !task.statusClass.includes('dispute') && !task.statusClass.includes('waiting'), 'bg-[#FF5252]': task.statusClass.includes('dispute'), 'bg-[#FF9800]': task.statusClass.includes('waiting') }"></view>
              <view class="task-icon w-[40rpx] h-[40rpx] bg-[#E3F2FD] rounded-[10rpx] flex items-center justify-center mr-[12rpx]">
                <icon-font :name="task.icon" class="text-[#2196F3]" />
              </view>
              <view class="task-details flex-1">
                <text class="task-name font-medium mb-[4rpx]">{{ task.name }}</text>
                <view class="task-meta flex text-[12rpx] text-[#777]">
                  <text v-for="(meta, i) in task.meta" :key="i" class="mr-[15rpx]">{{ meta }}</text>
                </view>
              </view>
              <text class="task-status font-medium" :class="{ 'text-[#2196F3]': !task.statusClass.includes('dispute') && !task.statusClass.includes('waiting'), 'text-[#FF5252]': task.statusClass.includes('dispute'), 'text-[#FF9800]': task.statusClass.includes('waiting') }">{{ task.status }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务认证 -->
    <view class="section-title px-[20rpx] pt-[15rpx] pb-[5rpx] text-[18rpx] font-bold text-[#333] flex items-center">
      <icon-font name="id-card" class="text-[#2196F3] mr-[8rpx]" />
      服务认证
    </view>
    <view class="service-section px-[20rpx]">
      <view class="service-cards grid grid-cols-2 gap-[15rpx]">
        <view v-for="(card, index) in serviceCards" :key="index" class="service-card bg-white rounded-[16rpx] p-[20rpx] shadow-[0_5rpx_15rpx_rgba(0,0,0,0.05)] flex flex-col items-center text-center" :class="{ 'vip': card.vip }">
          <view class="service-card-icon w-[60rpx] h-[60rpx] bg-[#E3F2FD] text-[#2196F3] rounded-full flex items-center justify-center mb-[15rpx]">
            <icon-font :name="card.icon" class="text-[32rpx]" />
          </view>
          <text class="service-title font-bold mb-[8rpx]">{{ card.title }}</text>
          <text class="service-desc text-[13rpx] text-[#666] mb-[15rpx] min-h-[40rpx]">{{ card.description }}</text>
          <nut-button class="service-btn bg-gradient-to-r from-[#2196F3] to-[#21CBF3] text-white p-[8rpx_20rpx] rounded-[20rpx] font-medium text-[14rpx] w-full transition-all duration-300 hover:translate-y-[-2rpx] hover:shadow-[0_4rpx_8rpx_rgba(33,150,243,0.3)]" :class="{ 'bg-gradient-to-r from-[#FFD54F] to-[#FFB300] text-[#333]': card.vip }" @click="goToService(card)">
            {{ card.buttonText }}
          </nut-button>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav fixed bottom-0 left-0 right-0 max-w-[750rpx] bg-white flex justify-around p-[10rpx_0] shadow-[0_-2rpx_10rpx_rgba(0,0,0,0.1)] z-1000">
      <view v-for="(nav, index) in bottomNav" :key="index" class="nav-item flex flex-col items-center text-[12rpx]" :class="{ 'text-[#2196F3] bg-[#E3F2FD]': nav.active }" @click="selectBottomNav(index)">
        <icon-font :name="nav.icon" class="text-[20rpx] mb-[3rpx]" />
        <text>{{ nav.label }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';

// 常用功能列表
const features = [
  { icon: 'tasks', name: '我的任务', badge: '3' },
  { icon: 'gift', name: '推广中心' },
  { icon: 'map-marker-alt', name: '签到打卡' },
  { icon: 'book', name: '我的课程', badge: '2' },
  { icon: 'store', name: '商家中心' },
  { icon: 'star', name: '评价管理' },
  { icon: 'shield-alt', name: '安全设置' },
  { icon: 'headset', name: '联系客服' }
];

// 任务标签
const taskTabs = [
  { title: '我发布的', active: true },
  { title: '我接受的', count: '3' }
];

// 任务分类
const taskCategories = [
  {
    title: '进行中的任务',
    viewAll: true,
    tasks: [
      { icon: 'bullhorn', name: '网站UI设计', meta: ['悬赏金额: ¥1,200', '截止: 2023-12-15'], status: '进行中' },
      { icon: 'file-code', name: '小程序开发', meta: ['悬赏金额: ¥3,800', '截止: 2023-12-20'], status: '待验收', statusClass: 'waiting' }
    ]
  },
  {
    title: '有异议的任务',
    tasks: [
      { icon: 'exclamation-triangle', name: 'LOGO设计', meta: ['悬赏金额: ¥800', '申请仲裁'], status: '处理中', statusClass: 'dispute' }
    ]
  }
];

// 服务认证卡片
const serviceCards = [
  { icon: 'user-tie', title: '平台从业者', description: '实名认证后，可接受任务赚取收益', buttonText: '立即认证' },
  { icon: 'store', title: '商家入驻', description: '成为服务商/培训商/传承商', buttonText: '申请入驻' },
  { icon: 'crown', title: '升级SVIP', description: '高校生¥40/年 社会人士¥80/年', buttonText: '立即升级', vip: true },
  { icon: 'qrcode', title: '推广二维码', description: '邀请好友注册，赚取推广收益', buttonText: '生成推广码' }
];

// 底部导航
const bottomNav = [
  { icon: 'home', label: '首页' },
  { icon: 'compass', label: '发现' },
  { icon: 'tasks', label: '任务' },
  { icon: 'user', label: '我的', active: true }
];

// 点击充值按钮
const recharge = () => {
  Taro.showToast({ title: '即将跳转到充值页面' });
};

// 点击提现按钮
const withdraw = () => {
  Taro.showToast({ title: '即将跳转到提现页面' });
};

// 点击记录按钮
const records = () => {
  Taro.showToast({ title: '即将跳转到记录页面' });
};

// 切换任务标签
const selectTaskTab = (index) => {
  taskTabs.forEach((tab, i) => {
    tab.active = i === index;
  });
};

// 点击服务认证按钮
const goToService = (card) => {
  Taro.showToast({ title: `即将进入${card.title}页面` });
};

// 切换底部导航
const selectBottomNav = (index) => {
  bottomNav.forEach((item, i) => {
    item.active = i === index;
  });
};
</script>

<style scoped></style>